<!--
 * @Description: 责任区域设置
 * @Author: wind-lc
 * @version: 1.0
 * @Date: 2021-09-13 11:21:41
 * @LastEditTime: 2022-09-02 16:35:58
 * @FilePath: \cscec-pms-admin\src\views\project\responsibilityAreaSetting\index.vue
-->
<template>
  <base-breadcrumb :title="$route.meta.title">
    <a-row
      :gutter="10"
      class="page-height"
    >
      <!-- 树搜索 -->
      <a-col
        :span="6"
        class="permission-collapsed"
        :class="{'permission-tree-collapsed':collapsed}"
      >
        <a-card
          :style="{'border':collapsed?'none':'border: 1px solid #e8e8e8'}"
          class="page-height-tree"
        >
          <title-name title="组织架构" />
          <PermissionTreeOrganization
            :collapsed.sync="collapsed"
            @select="handleSelect"
          />
        </a-card>
      </a-col>
      <!-- 树搜索 -->
      <a-col
        :span="18"
        class="permission-collapsed page-height-list-wrapper"
        :style="collapsed?'width:calc(100% - 10px)':''"
      >
        <!-- 搜索 -->
        <searchData
          :search-data="searchOption"
          @search="search"
        />
        <!-- 搜索 -->
        <a-card class="page-height-list">
          <!-- <title-name title="责任区域设置" /> -->
          <list-table
            ref="table"
            :columns="columns"
            :request="loadData"
            :page-keys=" ['pageNo', 'pageSize', 'totalSize']"
            :statistics-config="{use: true,statistics,temp}"
            :is-show-total="false"
          >
<!--            <template-->
<!--              slot="prefix"-->
<!--              slot-scope-->
<!--            >-->
<!--              <a style="display: none;" />-->
<!--            </template>-->
            <template
              slot="operation"
              slot-scope="text,record"
            >
              <a
                v-btn-permission="'pm_040_edi_02'"
                @click="handleOperation(record)"
              >管理责任区域</a>
            </template>
          </list-table>
        </a-card>
      </a-col>
    </a-row>
  </base-breadcrumb>
</template>
<script>
import PermissionTreeOrganization from '@/components/businessComponents/PermissionTreeOrganization'
import responsibilityAreaSetting from '@/api/project/responsibilityAreaSetting'

export default {
  name: 'ResponsibilityAreaSetting',
  components: {
    PermissionTreeOrganization
  },
  data() {
    return {
      selectedKeys: [], // 选中节点
      selectOptions: {}, // 选中节点对象
      // 查询参数
      searchData: {},
      // 搜索选项
      searchOption: [
        {
          name: '项目名称',
          value: 'projectName',
          type: 'input'
        }
      ],
      // 表头
      columns: [
        {
          title: '序号',
          width: 80,
          align: 'center',
          customRender: (text, record, index) => {
            return index + 1
          }
        },
        {
          title: '分公司',
          width: 200,
          dataIndex: 'branchComName'
        },
        {
          title: '项目名称',
          width: 100,
          dataIndex: 'projectName'
        },
        {
          title: '责任区域数量',
          width: 160,
          dataIndex: 'dutyAreaNum'
        },
        {
          title: '操作',
          dataIndex: 'operation',
          width: 170,
          scopedSlots: { customRender: 'operation' }
        }
      ],
      //组织架构选中项
      select: {},
      //表格数据加载
      loadData: async (q) => {
        try {
          // if (JSON.stringify(this.select) !== '{}') {
            let branchComId = undefined
            let projectId = this.select.projectId || undefined
            if (this.select?.tageCode === 'BC') {
              branchComId = this.select.orgId
            }
            const params = Object.assign(q, {
              query: {
                branchComId,
                projectId,
                projectName: this.searchData.projectName
              }
            })
            let res = await responsibilityAreaSetting.queryList(params)
            let count = await responsibilityAreaSetting.queryStatistics({
              branchComId,
              projectId,
              projectName: this.searchData.projectName
            })
            if (count.code === 200) {
              this.statistics.total = count.data
            } else {
              this.statistics.total = 0
            }
            if (res.code === 200) {
              return { code: 200, data: res.data, ...res }
            }
            return { code: 200, data: [] }
          // } else {
          //   return { code: 200, data: [] }
          // }
        } catch (error) {
          console.log(error)
        }
      },
      // 统计
      statistics: {
        total: 0
      },
      // 统计模板
      temp: () => {
        return <span style="margin-right: 12px">责任区域总数量：{this.statistics.total}</span>
      },
      // 收缩展开树
      collapsed: false
    }
  },
  methods: {
    /**
     * @description: 搜索
     * @param {Object} value 搜索数据
     * @return {Void}
     */
    search(value) {
      this.searchData = value || {}
      this.$refs.table.getData(null, true)
    },
    /**
     * @description: 树选中
     * @param {object} node 节点对象
     * @return {void}
     */
    handleSelect(node) {
      this.select = node
      this.$refs.table.getData(null, true)
    },
    /**
     * @description: 管理责任区域
     * @param {object} record 行数据
     * @return {void}
     */
    handleOperation(record) {
      this.$router.push({
        path: '/project/responsibilityAreaSettingManagement',
        query: {
          id: record.id,
          projectId: record.projectId
        }
      })
    },
    /**
     * @description: 收缩展开树
     * @param {boolean} collapsed
     * @return {void}
     */
    handleCollapsed(collapsed) {}
  }
}
</script>
<style lang="less" scoped>
</style>

